<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/font/font-awesome-4.7.0/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/swiper-4.3.3.min.css"/>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/tool-choose.css"/>
    <script src="/public/static/wx/js/flex.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/static/wx/plug-in/swiper-4.3.3.min.js" type="text/javascript" charset="utf-8"></script>
    <title>选择工具</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #btn{
            width: 83%;
            letter-spacing: 0.2em;
            padding-left: 2%;
            line-height: 2.5;
            margin: 0.5rem auto;
            font-size: 0.48rem;
            color: #fff;
            text-align: center;
            background-color: #009688;
            border-radius: 3px;
        }
        .check{
            position: absolute;
            font-size: 16px;
            color: red;
            top: 0;
            left: 0;
            display: inline-block;
            width: 100%;
            text-align: center;
            line-height: 45px;
            background-color: rgba(0,0,0,0.2);
        }
        .tool{
            width: 100% !important;
            height: 47px !important;
        }
        .tool i{
            color: #ccc;
            width: 25px;
            height: 25px;
        }
        .tool .span{
            display: inline-block;
            line-height: 47px;
            width: 16%;
            text-align: center;
        }
        .active i{
            color: #009688;
        }
    </style>
</head>

<body style="position: relative">
<div class="index" style="margin-bottom: 45px;">
    <div class="topbar">
        <a href="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
        <p>选择工具</p>
    </div>
    <div class="select_list clearfix">
        <div class="swiper-container">
            <div class="swiper-wrapper">

                <div class="swiper-slide select_bar active" cid="0">全部</div>

                {volist name="tylist" id="vo"}
                <div class="swiper-slide select_bar" cid="{$vo.id}">{$vo.type_name}</div>
                {/volist}

            </div>
        </div>
    </div>
    <div class="tool-list clearfix" id="dataList" style="margin-bottom: 70px;">
        <!--<div class="tool" tid='1'>
            <div class="mask">
                <img src="/public/static/wx/img/get-tool/select.png" alt=""/>
            </div>
            <img src="/public/static/wx/img/get-tool/1.png" alt=""/>
            <p>世达（SATA）12件</p>
        </div>-->

    </div>

</div>

<div style="position: fixed;height: 45px;width: 100%;display: flex;justify-content: center;text-align: center;bottom:0">
    <div class="btn" id="btn" style="height: 45px;margin: 0;width: 100%">
        确定
    </div>
</div>
<script src="/public/static/wx/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    var url_id = '{:input("id")}';

    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        loodpedSlides: 10,
        spaceBetween: 1,

    });

    //工具分类事件
    function toolsbtn(){
        $('.tool').on('click', function () {
            $(this).toggleClass('active');
            appendList($(this));
        });
    }


    //提交数据
    $('.btn').on('click',function () {
        var obj = {};
        obj.id =  url_id;
        obj.tids = window.localStorage.tool;

        if(obj.tids.length<=0){
            layer.msg('您没有选中工具',{icon:5});
            return;
        }
        $.post('{:url("addTools")}',obj,function (res) {

            if(res.code == 1){
                layer.msg(res.msg,{icon:6,shade:0.1},function () {
                    self.location=document.referrer;
                });
            }else{
                layer.msg(res.msg,{icon:5});
            }

        });
    });

    window.localStorage.clear();

    var toolList = [];

    function appendList(_this) {
        $(_this).toggleClass('active');
        var tid = $(_this).attr('tid');
        checkList(tid);
    }

    function checkList(tid) {
        if (toolList.length > 0) {
            for (let i = 0; i < toolList.length; i++) {
                if (toolList[i] == tid) {
                    toolList.splice(i, 1);
                    changeList();
                    return;
                }
            }
            toolList.push(tid);
            changeList();
        } else {
            toolList.push(tid);
            changeList();
        }

    }

    function changeList() {
        window.localStorage.setItem('tool', toolList);
        console.log(window.localStorage.tool)
    }

    /****************************************/
    var indexl = 0;
    var tem = '';

    var A_obj = {
        page:1,
        limit:15,
        per:2,
    };

    var url = '{:url("tools")}';

    //工具分类筛选
    $('.select_bar').on('click', function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');

        var val = $(this).attr('cid');
        if(val=='0'){
            delete A_obj.cid;
            delete A_obj.key;
        }else{
            A_obj.cid = val;
        }

        if(val == tem){
            return;
        }
        sendto();
        tem = val;

    });


    $('#dataList').empty();
    sendto();
    //发送请去
    function sendto() {
        indexl = layer.load(0,{offset:['45%','45%']});
        $.post(url,A_obj,call);
    }


    function call(data) {
        layer.close(indexl);
        /*var dom = $('<div class="tool" tid="" onclick="appendList(this)">\n' +
            '            <div class="mask">\n' +
            '                <img src="/public/static/wx/img/get-tool/select.png" alt=""/>\n' +
            '            </div>\n' +
            '            <img src="" class="pic" alt=""/>\n' +
            '            <p class="title"></p>' +
                '<span class="check"></span>'+
            '        </div>');*/
        var dom = $('<div class="tool" tid="" onclick="appendList(this)">' +
                '<span class="span"><i class="fa fa-check-square" aria-hidden="true"></i></span>'+
            '<p class="title" style="display: inline-block;width: 80%;float: right;line-height: 47px;height: 100%"></p>' +
            '        </div>');

        A_obj.per = Math.ceil(data.count/A_obj.limit);
        $.each(data.data,function (k,v) {
            var ts = dom.clone();
            ts.find('.title').text(v.title+'-'+v.model);

            /*ts.find('.pic').attr('src',(v.pic&&v.pic.length>0?v.pic:'/public/static/common/images/tools-def.jpg'));*/

            ts.attr('tid',v.id);

            if(isId(v.id))
                ts.addClass('active');

            if(v.is_check==1&&v.sur_waring<=0){
                //ts.find('.check').text('已超过校验期'+Math.abs(v.sur_waring)+'天');
                ts.find('.title').append('(已超校验期'+Math.abs(v.sur_waring)+'天)');
            }

            $('#dataList').append(ts);
        });

        //toolsbtn();

    }

    //**判断是否选中
    function isId(id) {
        if(toolList.length>0)
            for (var i=0;i<toolList.length;i++)
                if(id == toolList[i] + '')
                    return true;
        return false;
    }


    //滚动加载
    $(window).scroll(function () {

        if(A_obj.page < A_obj.per){

            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();

            if (scrollTop + windowHeight == scrollHeight ) {

                A_obj.page++;
                sendto();

            }
        }
    });
</script>
</body>

</html>